<template>
    <div>
        <el-button type="primary1" :disabled="!userStore.publish" @click="publishClick">一键下发
            <!-- <span v-if="userStore.publish">({{userStore.publishNum}})</span> -->
        </el-button>
        <!-- 新增弹框 -->
        <teleport to="body">
            <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="660" :height="auto"
                v-model="state.addModal" resize :mask="true">
                <template #title>
                    <div class="w100 h100 fsc mask_title">下发清单</div>
                </template>
                <template #default>
                    <div class="form_box">
                        <vxe-table class="tableFontSize" height="400" :data="state.publishList" stripe border="inner"
                            @checkbox-change="checkchange" @checkbox-all="selectAllCheckboxChange"
                            :checkbox-config="checkboxConfig">
                            <vxe-column type="checkbox" :width="42"></vxe-column>
                            <vxe-column field="type" title="操作类型"></vxe-column>
                            <vxe-column field="module" title="设备"></vxe-column>
                            <vxe-column field="code" title="设备编号"></vxe-column>
                            <vxe-column field="name" title="设备名称"></vxe-column>
                            <vxe-column field="place" title="安装地点"></vxe-column>
                            <vxe-column field="status" title="当前状态">
                                <template #default="{ row }">
                                    <el-tag type="primary" v-if="row.status == '待下发'">{{row.status}}</el-tag>
                                    <el-tag type="success" v-if="row.status == '下发成功'">{{row.status}}</el-tag>
                                    <el-tag type="danger" v-if="row.status == '下发失败'">{{row.status}}</el-tag>
                                </template>
                            </vxe-column>
                        </vxe-table>
                        <div class="form_footer">
                            <el-button @click="cancel">取消</el-button>
                            <el-button :loading="state.btnLoading" :disabled="state.records.length==0?true:false"
                                type="primary" @click="submitForm">
                                {{ state.btntip }}
                            </el-button>
                        </div>
                    </div>
                </template>
            </vxe-modal>
        </teleport>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const props = defineProps({
        formData: {
            type: Object,
            default: () => {
                return {}
            }
        }
    })

    // 重点
    const form = reactive(props.formData)
    const state = reactive({
        centerDialogVisible:false,
        addModal: false,
        publishList: [],
        records: [],
        btntip: '下发',
        btnLoading: false
    })

    function cancel() {
        state.addModal = false
    }

    function getList() {
        axios.post('/publish/list', {}).then(res => {
            state.publishList = res.data
        })
    }

    function publishClick() {
        state.addModal = true
        state.btntip = '下发'
        state.records = []
        getList()
    }

    function submitForm() {
        state.btnLoading = true
        axios.post('/publish/publish', state.records).then(res => {
            if (res.code == 200) {
                state.btnLoading = false
                getList()
                proxy.$modal.msgSuccess(res.msg);
                state.btntip = '继续下发'
                state.records = []
            }
        })
    }

    function selectAllCheckboxChange(e) {
        state.records = e.records
    }

    function checkchange(e) {
        state.records = e.records
    }
    const checkboxConfig = reactive({
        reserve: true,
        checkMethod: ({
            row
        }) => {
            return row.status != '下发成功'
        },
        visibleMethod({
            row
        }) {
            return row.status != '下发成功'
        }
    })
    
    watchEffect(()=>{
        if(userStore.isPublishData>0){
            state.addModal=true
            getList()
        }
    })
</script>